<template>
	<view class="page">
		<view class="title">
			<view class="install">
			</view>
			<!-- 信息 -->
			<view class="information">
				<view class="left">
					<view class="head">
						<image mode="aspectFill" :src="userinfo.image"  @tap="choose"></image>
					</view>
					<view class="phone">
						<view class="phone-content">
							{{username}}
						</view>
						
					</view>
					<view class="isvip">
						<text class="grade">{{starts(userinfo.userGrade.memberGradeId)}}</text>
					</view>
				</view>
				<view class="right" @tap="vip" :style="{'right':userinfo.userVip.endTime?'-30rpx':'-16rpx'}">
					<view style="width: 288rpx;font-weight: bold;" v-if="userinfo.userVip.endTime">到期时间：{{sub(userinfo.userVip.endTime)}}</view>
					<view style="width: 130rpx;font-size: 30rpx;" v-else>开通</view>
				</view>
			</view>
			<!-- 我的资产 -->
			<view class="assets flex align-items justify-around">
				<view class="assets-left">
					<view class="available-content">
						{{util.decimal(userinfo.myMoney.balance)}}
					</view>
					<view class="available">
						可用资产
					</view>
				</view>
				<view class="assets-right">
					<view class="available-content" >
						{{proint(userinfo.contribution)}}
					</view>
					<view class="available">
						贡献值
					</view>
				</view>
				<view class="assets-right">
					<view class="available-content">
						{{proint(userinfo.huoBalance)}}
					</view>
					<view class="available">
						火币资产
					</view>
				</view>
				<view class="tAssets-gn flex align-items justify-between">
					<view class="gn-item flex align-items justify-center" v-for="(item,index) in gnList" :key="index" @tap="gnNav(index)">
						<image class="gn-img" :src="item.icon" mode=""></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 功能栏 -->
		<view class="main" >
			<view class="main-border">
				<view class="main-item flex align-items" :data-a="index" v-for="(item,index) in list" :key="index" @tap="Jump(item.url)">
					<image class="img1" :src="item.icon" mode=""></image>
					<text>{{item.name}}</text>
					<view class="cell-item">
						<text class="cell-text" v-if="item.name=='联系我们' && notive>0">{{notive}}</text>
						<image class="img2" src="../../static/user/right.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gnList:[
					{
						icon:'../../static/user/tb.png',
						name:'提币'
					},
					{
						icon:'../../static/user/cb.png',
						name:'充币'
					},
					{
						icon:'../../static/user/hz.png',
						name:'互转'
					}
				],
				list:[
					{
						icon:'../../static/user/user9.png',
						name:'邀请好友',
						url:'./invitation'
					},
					{
						icon:'../../static/user/user8.png',
						name:'新手指南',
						url:'/pages/college/guide'
					},
					{
						icon:'../../static/user/user1.png',
						name:'开通会员',
						url:'./vip'
					},
					{
						icon:'../../static/user/user2.png',
						name:'钱包记录',
						url:'./WalletRecords'
					},
					// {
					// 	icon:'../../static/user/user3.png',
					// 	name:'我的社区',
					// 	url:'./list'
					// },
					{
						icon:'../../static/user/user4.png',
						name:'联系客服',
						url:'./kefu-item'
					},
					{
						icon:'../../static/user/user5.png',
						name:'安全',
						url:'./security'
					},
					{
						icon:'../../static/user/user6.png',
						name:'关于',
						url:'./about'
					},
					{
						icon:'../../static/user/user7.png',
						name:'设置',
						url:'./install'
					},
				],
				username:uni.getStorageSync('Login').name,//用户名称
				notive:0,
				form:{},//累计收益
			}
		},
		computed:{
			starts(){//用户等级
				return t=>{
					return t=='0'?'普通用户':t=='1'?'VIP':t=='2'?'代理商':t=='3'?'合伙人':'普通用户'
				}
			},
			userinfo(){//用户信息
			    return {userGrade: {},userVip:{},myMoney:{}, ...this.$state.userinfo}
			},
			proint(){
				return t=>{
					if(!t) return '0.0000'
					return Number(t).toFixed(4)
				}
			},
			sub(){
				return t=>t.substring(0,10)
			},
		},
		onLoad() {
			this.request.post('order/getCountProfit').then(res=>{
				this.form.countProfit=res.data.data.countProfit
			})
			
		},
		onShow() {
			console.log(this.userinfo)
			this.$store.dispatch('getUser') //获取用户本地资产
			this.num()//未读消息
		},
		methods: {
			async choose() {//选择上传相册
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: async res => {
						const image = await this.util.upload(res.tempFiles[0]);
						if (!image) return this.util.toast('图片发送失败');
						console.log(image)
						// return ;
						this.hand(image)
					}
				});
			},
			hand(e){//上传头像
				this.request.post({
					url:'user/setImage',
					params:{
						image:e
					}
				}).then(res=>{
					console.log(res)
					this.$store.dispatch('getUser') //获取用户本地资产
				})
			},
			// 功能
			gnNav(index){
				if(index=='0'){
					uni.navigateTo({
						url:'./tibi'
					})
				}
				if(index=='1'){
					uni.navigateTo({
						url:'./chongbi'
					})
				}
				if(index=='2'){
					uni.navigateTo({
						url:'./huzhuan'
					})
				}
			},
			nav(){
				uni.navigateTo({
					url:"./wallet"
				})
			},
			income(){//收益
				 this.$Router.push({ path: '/pages/user/income'})	
			},
			num(){
				this.request('kefuMessage/num').then(res=>{
					this.notive=res.data.data
				})
			},
			Jump(url){
				uni.navigateTo({
					url:url
				})
			},
			vip(){
				uni.navigateTo({
					url:"./vip"
				})
			}
		}
	}
</script>

<style lang="scss">
	.title{
		width: 750rpx;
		height: 550rpx;
		background: linear-gradient(89deg, #F6DE8C 0%, #F3C31B 100%);
		border-radius: 0px 0px 48px 48px;
		.install{
			text-align: right;
			padding: 80rpx 36rpx 0 0;
			box-sizing: border-box;
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: 400;
			color: #FFFFFF;
		}
		.information{
			display: flex;
			align-items: center;
			padding: 82rpx 0 0 56rpx;
			box-sizing: border-box;
			position: relative;
			.left{
				width: 93%;
				text-align: center;
				// border: 1px solid red;
				.head{
					width: 150rpx;
					height: 150rpx;
					background: #FFFFFF;
					border-radius: 50%;
					margin: 0 auto;
					image{
						border-radius: 50%;
						width: 100%;
						height: 100%;
					}
				}
				.phone{
					color: #333;
					font-size: 36rpx;
					font-family: PingFang;
					font-weight: bold;
					margin: 16rpx 0;
					.phone-content{
						font-weight: bold;
					}
				}
				.isvip{
					.grade{
						// width: 150rpx;
						height: 40rpx;
						background: rgba(255, 255, 255, 0.4);
						border-radius: 24rpx;
						font-size: 24rpx;
						color: #333;
						padding: 5rpx 35rpx;
						box-sizing: border-box;
					}
				}
			}
			.right{
				// width: 300rpx;
				height: 90rpx;
				background: #FFFFFF;
				text-align: center;
				border-radius: 30px 0px 0px 30px;
				position: absolute;
				
				top: 102rpx;
				color: $light-color;
				font-size: 26rpx;
				transform: scale(0.8);
				padding: 28rpx 20rpx;
				box-sizing: border-box;
				line-height: 34rpx;
				
			}
		}
		.assets{
			width: 678rpx;
			height: 280rpx;
			background: #FFFFFF;
			color: $light-color;
			margin: 40rpx auto 0;
			border-radius: 16px;
			padding: 40rpx 20rpx 40rpx;
			box-sizing: border-box;
			font-family: PingFang;
			flex-wrap: wrap;
			text-align: center;
			.assets-title{
				font-size: 30rpx;
				font-weight: bold;
				letter-spacing: 1px;
			}
			.available{
				font-size: 30rpx;
				font-weight: 400;
				margin: 20rpx 0;
				color: #999;
			}
			.available-content{
				font-size: 40rpx;
				font-weight: bold;
			}
			.income{
				margin-top: 20rpx;
				.income-text{
					opacity: 0.8;
					font-size: 30rpx;
					font-weight: bold;
				}
				.income-number{
					margin-left: auto;
					font-size: 40rpx;
					font-weight: bold;
				}
			}
			.tAssets-gn{
				width: 100%;
				.gn-item{
					color: #FFFFFF;
					font-size: 32rpx;
					text-align: center;
					position: relative;
					background-color: $light-color;
					width: 180rpx;
					height: 60rpx;
					border-radius: 30rpx;
					line-height: 60rpx;
					&::after{
						content: "";
						width: 0;
						height: 40%;
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						border: 1px solid rgba(#fff,0.15);
					}
					.gn-img{
						height: 38rpx;
						width: 42rpx;
						margin-right: 10rpx;
					}
					&:last-child{
						&::after{
							border: none;
						}
					}
				}
				
			}
		}	
	}
	.main{
		width: 678rpx;
		margin: 170rpx auto 40rpx;
		.main-border{
			padding: 20rpx 0rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border: 1px solid rgba(22, 119, 255, 0.05);
			border-radius: 16rpx;
		}
		.main-item{
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(255, 255, 255, 0.15);
			.img1{
				width: 34rpx;
				height: 34rpx;
				margin-right: 20rpx;
			}
			.cell-item{
				margin-left: auto;
				.cell-text{
					background: red;
					border-radius: 50%;
					line-height: 30rpx;
					display: inline-block;
					font-size: 20rpx;
					padding: 0rpx 8rpx;
					margin-right: 20rpx;
				}
			}
			text{
				font-size: 32rpx;
				font-family: PingFang;
				font-weight: 400;
				color: #333;
			}
			.img2{
				width: 12rpx;
				height: 20rpx;
				margin-left: auto;
			}
		}
		.main-item[data-b='2'],.main-item[data-a='1']{
			border: none;
			// padding-bottom: 40rpx;
		}
		.main-item[data-b='0'] .img1{
			width: 24rpx;
			height: 30rpx;
		}
	}
</style>
